Ext.define('CA.base.PriceChanger', {
    extend: 'Ext.Panel',
    xtype: 'CA.base.PriceChanger',

    constructor: function(config){
        Ext.apply(this, {
            bodyStyle: 'background: none; padding: 10px;',
            height: 70,
            defaults: {
                labelWidth: 50
            },
            items: [
                {
                    xtype: 'multislider',
                    width: 230,
                    fieldLabel: 'Цена',
                    tipText: function(thumb){
                        return String(thumb.value) + ' ' + config.money;
                    },
                    values: [config.minValue, config.maxValue],
                    increment: 1000,
                    minValue: config.minValue,
                    maxValue: config.maxValue,
                    itemId: 'slider',
                    listeners: {
                        change: this.onSliderChange,
                        scope: this
                    }
                },
                {
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        align:'top'
                    },
                    items: [
                        {
                            xtype: 'numberfield',
                            fieldLabel: 'от',
                            width: 115,
                            labelWidth: 15,
                            value: config.minValue,
                            minValue: config.minValue,
                            maxValue: config.maxValue,
                            itemId: 'minField',
                            listeners: {
                                change: this.onMinFieldChange,
                                scope: this
                            },
                            flex: 1
                        },
                        {
                            xtype: 'numberfield',
                            fieldLabel: 'до',
                            margin: '0 0 0 5',
                            width: 115,
                            labelWidth: 15,
                            value: config.maxValue,
                            minValue: config.minValue,
                            maxValue: config.maxValue,
                            itemId: 'maxField',
                            listeners: {
                                change: this.onMaxFieldChange,
                                scope: this
                            },
                            flex: 1
                        }
                    ]
                }
            ]
        });

        this.callParent(arguments);
    },

    onMinFieldChange: function(field, val){
        var slider = this.down('#slider');

        slider.setValue(0, val);
    },

    onMaxFieldChange: function(field, val){
        var slider = this.down('#slider');

        slider.setValue(1, val);
    },

    onSliderChange: function(slider, value, thumb){
        var minField = this.down('#minField'),
            maxField = this.down('#maxField');

        if(thumb.index){
            maxField.setRawValue(value);
        } else {
            minField.setRawValue(value);
        }
    }
});